<template>
  <div style="display: flex;">
    <div class="show" style="height: 95vh; width: 25vw; ">
      <el-card class="box-card" style="height: 90%; display: flex; justify-content: center;">
        <div style="height: 260px;width: 180px; margin: 40px 8vw 20px 8vw ;">
          <img :src="courseData.url" alt="" style="width: 100%;height: 100%;">
        </div>
        <div style="margin-top: 20px; text-align: center">
          {{ courseData.name }}
        </div>
        <div style="margin-top: 50px;text-align: center;">
          {{ courseData.description }}
        </div>
      </el-card>
    </div>

    <div style="height: 100vh; width: 800px;margin-left: 20px;">
      <el-scrollbar style="height: 85vh;">
        <div v-for=" item in comments" :key="item.review_id">
          <el-card style="margin-bottom: 20px;">
            <div style="display: flex;">
              <div style="height: 100px;width: 80px;">
                <img :src="item.userFace" alt="" style="height: 100%;width: 100%;">
              </div>
              <div style="margin-left: 10px;">
                <div style="font-size: 14px; font-weight: 700;">
                  评论者:
                  {{ item.realname }}
                </div>
                <div style=" font-size: 14px; margin-top: 50px;font-weight: 700;"">
                  发布时间:<br>
                  {{ Number(item.created) | fmtDate }}
                </div>
              </div>
              <div style=" margin:10px 0 0 30px; width: 320px;">{{ item.comment }}</div>
                <div v-if="item.tag"
                  style="width: 100px; height: 85px; display: flex; justify-content: center; align-items: center;">
                  <div>
                    <el-tag style="color: blanchedalmond; background-color: plum; font-size: 16px;">{{
                      item.tag }}</el-tag>
                  </div>
                </div>
                <div v-else
                  style="width: 100px; height: 85px; display: flex; justify-content: center; align-items: center;">
                </div>
                <div>
                  <div>
                    <el-tag v-if="item.status === '审核通过'" type='success'>审核通过</el-tag>
                    <el-tag v-else-if="item.status === '暂未审核'" type='info'>暂未审核</el-tag>
                    <el-tag v-else-if="item.status === '审核不通过'" type='warning'>审核不通过</el-tag>
                  </div>
                  <div style="margin: 30px 0 0 0; color: red; cursor: pointer; font-size: 15px;">
                    <i style="margin-left: 30px;" v-if="item.status === '审核不通过'" class="el-icon-delete"
                      @click="toDelete(item.review_id)"></i>
                    <!-- 添加标签按钮 -->
                    <el-button v-if="item.status === '审核通过'" type="text" icon="el-icon-edit"
                      @click="openTagDialog(item.review_id)">添加标签</el-button>
                  </div>
                </div>
                <div>
                  <el-link @click="toCheck(item)" :disabled="item.status !== '暂未审核'" :underline="false"
                    style="margin-left: 20px;" type="primary">审核</el-link><br>
                </div>
              </div>
          </el-card>
          <!-- 添加标签的对话框 -->
          <el-dialog title="添加标签" :visible.sync="visible2" width="30%" @close="resetTagsForm">
            <el-form :model="tagsForm">
              <!-- {{ tagsForm }} -->
              <el-form-item label="标签">
                <el-input v-model="tagsForm.tag" placeholder="请输入标签" />
              </el-form-item>
            </el-form>
            <span slot="footer" style="display: flex; justify-content: space-evenly;">
              <div> <el-button @click="visible2 = false">取 消</el-button></div>
              <div> <el-button type="primary" @click="submitTag()">确 定</el-button></div>
            </span>
          </el-dialog>
        </div>
      </el-scrollbar>
    </div>


    <!-- 审核模态框 -->
    <el-dialog title="审核评论" :visible.sync="visible" width="50%">
      <!-- <div style="text-align: center;">{{ rowArticle.title }}</div> -->
      <!-- <div v-html="rowArticle.content"></div> -->
      您正在审核评论。。。。。。。。。。。。。
      <span slot="footer" style="display: flex; justify-content: space-evenly;">
        <el-button @click="changeStatus(courseData.review_id, '审核不通过')" type="danger">审核不通过</el-button>
        <el-button @click="changeStatus(courseData.review_id, '审核通过')" type="primary">审核通过</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { get, post } from '@/utils/request'
export default {
  data() {
    return {
      courseData: {},
      comments: [],
      visible: false,
      visible2: false,
      courseData: {},
      tagsForm: {},
      currentComment: null
    };
  },
  methods: {
    async submitTag() {
      console.log(this.tagsForm);
      // 检查标签名是否为空
      if (!this.tagsForm.tag || this.tagsForm.tag.trim() === '') {
        this.$message.error('您未输入标签名，请设置标签');
        return;
      }
      let res = await post('course/updateCourseReviewTag', this.tagsForm)
      this.tagsForm = {}
      console.log(res);
      this.$message.success(res.message);
      this.getComments()
      this.visible2 = false;
    },
    openTagDialog(id) {
      this.visible2 = true;
      this.tagsForm.id = id
    },
    resetTagsForm() {
      this.tagsForm = {}
    },
    async toDelete(id) {
      this.$confirm('此操作将删除这条评论, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await get('/review/deleteById', { id })
        if (res.status === 200) {
          this.getComments()
          console.log(res);
          this.$message({
            type: 'success',
            message: res.message
          });
        } else {
          this.$message.error(res.message)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    async changeStatus(id, status) {
      let res = await post('/review/changeStatus', { id, status })
      if (res.status === 200) {
        this.$notify({
          title: res.message,
          message: '审核成功',
          type: 'success'
        });
        this.visible = false
        this.getComments()
      } else {
        this.$notify.error({
          title: '失败',
          message: '审核失败',
          type: 'success'
        })
      }
    },
    // 审核评论
    toCheck(item) {
      console.log(item);
      this.courseData = item
      this.visible = true;
    },
    async getCourse() {
      console.log(this.$route.query.id);
      let res = await get('/course/detail', { id: this.$route.query.id })
      // console.log(res);
      this.courseData = res.data;
    },
    async getComments() {
      let res = await get('review/reviewsById', { courseId: this.$route.query.id })
      // console.log(res);
      this.comments = res.data
    }
  },
  created() {
    this.getCourse()
    this.getComments()
  }
};
</script>
